<template>
  <div id="App">
    <!-- 主体区域 -->
    <section id="app">
      <TodoHeader @addLi="addLi"></TodoHeader>
      <TodoMain :list="list" @closeLi="closeLi"></TodoMain>
      <TodoFooter :list2="list" @clearList="clearList"></TodoFooter>
    </section>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';

// 给一个渲染初始值
const morenList = [
  { id: 0, shiqing: '吃饭' },
  { id: 1, shiqing: '睡觉' },
  { id: 2, shiqing: '打豆豆' },
]

export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list')) || morenList
    }
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  methods: {
    // 添加
    addLi(lis) {
      this.list.push({
        id: +new Date(),
        shiqing: lis
      })

    },
    // 删除
    closeLi(id) {
      this.list = this.list.filter(item => item.id != id)
    },
    // 清空
    clearList() {
      this.list = []
    }
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('list', JSON.stringify(newValue))
      }
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  background: #fff;
  margin: 180px 0 40px 0;
  padding: 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
</style>